<template>
	<view class="miou-community-box bg-white"  v-show="indexPage=='community'">
		<!--搜索框-->
		<bar-search ></bar-search>
		
		<!-- 4宫格 -->
		<view class="fourbox" :style="{
				top: navigationBarHeight + statusBarHeight + 'px'
			}">
			<view-tab></view-tab>
		</view>
		
		
		
		<!-- 显示区域 -->
		<view class="community-list">
			<WaterfallsFlow :wfList='communityList' @itemTap="itemTap" />
		</view>
		
		<view class="cu-tabbar-height"></view>

	</view>
</template>


<script>
import  appMixin from './appMixin';
import viewTab from './viewTab.vue';
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
export default {
	name: 'ViewCommunity',
	mixins: [appMixin],
	components: {
		viewTab,
		WaterfallsFlow,
		uniLoadMore
	},
	data() {
		return {
			pagenum: 1,
			loadingType: 'more',
			communityList:[],
		}
	},
	mounted() {
		this.getCommunity(this.pagenum)
	},
	computed: {
		statusBarHeight(){
			return this.systemInfo.statusBarHeight
		},
		navigationBarHeight(){
			return this.systemInfo.navigationBarHeight;
		}
	},
	methods: {
		itemTap(item){
			console.log(item);
			this.$jumpPages('community', {dyid: item.dyid})
		},
		async getCommunity(pagenum) {
			this.loadingType = 'loading'
			let communityList =  await this.$apis.getCommunity({pagenum})
			if (communityList.length < 20) {
				this.loadingType = 'noMore'
				return
			}
			communityList = communityList.filter(item => item.dyshowtype != "V")
			this.communityList = this.communityList.concat(communityList)
			this.loadingType = 'more'
		},
		refresh(){
			if(this.indexPage=='community') {
				this.pagenum = 1
				this.communityList = []
				this.loadingType = 'more'
				this.getCommunity(this.pagenum)
			}
			
		},
		setReachBottom() {
			if(this.indexPage == 'community') {
				if(this.loadingType == 'loading' || this.loadingType == 'noMore'){
				    return
				}
				this.pagenum = this.pagenum + 1
				this.getCommunity(this.pagenum)
			}
			
		},
	}
}
</script>

<style lang="scss" scoped>
	
.swiper-box{
	height: calc(100% - var(--status-bar-height) - 200rpx)
}
.list-scroll-content{
	height: 100%;
}
.fourbox{
	position: sticky;
	background: #FFFFFF;
	z-index: 10;
}
</style>
